BlazorUI theme improvements ii (#12320)#12369
Open
msynk wants to merge 42 commits into
Open
Conversation
msynk
requested review from
Cyrus-Sushiant,
Copilot,
mhrastegari,
yasmoradi and
zahra-yousefi
|
Important Review skippedToo many files! This PR contains 158 files, which is 8 over the limit of 150. To get a review, narrow the scope: Upgrade to a paid plan to raise the limit. ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (158)
You can disable this status message by setting the Use the checkbox below for a quick retry:
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughThe PR adds shared focus-ring and disabled-state tokens, updates theme runtime contracts and JS/SSR wiring, expands demo coverage, and adds validation for the revised theming flow. ChangesTheme infrastructure and component adoption
Component styles
Demos, docs, and validation
Estimated code review effort: 5 (Critical) | ~120 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 3❌ Failed checks (2 warnings, 1 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR advances the BlazorUI theming system (phase II) by expanding theme tokens (motion/layout/breakpoints), improving accessibility (focus ring tokens + forced-colors), adding runtime system-theme subscription with .NET-side notifications, and updating multiple components/demos to better reflect disabled-state theming.
Changes:
- Add theme change notification pipeline (JS → .NET) and new theme utilities (contrast helpers, density presets, breakpoint defaults, SSR cookie convention, external stylesheet loader).
- Extend theme token surface area (motion + layout + breakpoints) and wire them into CSS variable mapping + Fluent stylesheets (including forced-colors and semantic tokens).
- Update component styling for focus-visible ring consistency and per-role disabled colors; expand demo pages and samples accordingly.
Reviewed changes
Copilot reviewed 111 out of 111 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorContrastTests.cs | Adds unit tests for WCAG contrast helper. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razor | Documents/advertises new advanced theming APIs. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razor.samples.cs | Adds disabled-state samples for BitLink. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razor | Shows disabled-state rendering for BitLink. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cs | Expands color samples (incl. background/foreground/border roles). |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor | Visual demo updates for additional icon color roles. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cs | Adds disabled-state samples for BitTag. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor | Shows disabled-state rendering for BitTag. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor.cs | Adds disabled-state samples across colors/variants for BitBadge. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor | Shows disabled-state rendering for BitBadge. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.samples.cs | Adds disabled-state samples for BitPagination. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor | Shows disabled-state rendering for BitPagination. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor.samples.cs | Adds disabled-state samples for BitTimeline item demo. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor | Shows disabled-state rendering for BitTimeline item demo. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor.samples.cs | Adds disabled-state samples for BitTimeline custom demo. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor | Shows disabled-state rendering for BitTimeline custom demo. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cs | Expands SearchBox samples across colors + disabled states. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor | Shows expanded SearchBox color/disabled examples. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cs | Adds disabled-state samples for ChoiceGroup (item). |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor | Shows disabled-state rendering for ChoiceGroup (item). |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cs | Adds disabled-state samples for ChoiceGroup (custom). |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor | Shows disabled-state rendering for ChoiceGroup (custom). |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.samples.cs | Adds disabled-state samples for Checkbox across roles. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor | Shows disabled-state rendering for Checkbox. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor.samples.cs | Adds disabled-state samples for ToggleButton. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor | Shows disabled-state rendering for ToggleButton. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.scss | Adds layout helper class for demo arrangement. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cs | Adds disabled-state samples for ButtonGroup (items). |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cs | Adds disabled-state samples for ButtonGroup (custom). |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cs | Adds disabled-state samples for Button across roles/variants. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor | Shows disabled-state rendering for Button. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.samples.cs | Adds disabled-state samples for ActionButton. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor | Shows disabled-state rendering for ActionButton. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeNotifications.cs | Adds .NET theme-change event source. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeMapper.cs | Maps/merges new motion/layout/breakpoint tokens to CSS vars. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeManager.cs | Adds notifier registration, override clearing, and async disposal. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsNotifierReceiver.cs | Adds JS-invokable receiver for theme-change notifications. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsExtensions.cs | Adds JS interop calls for clear/register/unregister notifier. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeDensityPresets.cs | Adds compact density preset overlay helper. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeCookie.cs | Documents SSR cookie name convention for theme preference. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorDerivation.cs | Adds optional WCAG-AA text adjustment when deriving colors. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorContrast.cs | Adds WCAG contrast ratio utilities. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeChangedEventArgs.cs | Adds event args for theme-change notifications. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeBreakpointDefaults.cs | Adds default breakpoint constants for theme layout. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeMotion.cs | Adds theme motion token container. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeLayout.cs | Adds theme layout token container (dir/density/breakpoints). |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBreakpoints.cs | Adds breakpoint token container. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitTheme.cs | Extends theme model with Motion and Layout. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeLoader.cs | Adds .NET helper to attach/detach external theme stylesheets. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeJsExtensions.cs | Adds JS interop calls for external theme link manipulation. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitAccentColorPresets.cs | Adds sample accent color presets for branding. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts | Adds OS theme subscription + .NET notifications + overrides clearing + external theme loader JS. |
| src/BlazorUI/Bit.BlazorUI/Styles/theme-variables.scss | Adds SCSS vars for disabled/focus tokens and focus-ring shape/shadow tokens. |
| src/BlazorUI/Bit.BlazorUI/Styles/functions.scss | Adds focus ring mixins and imports theme variables. |
| src/BlazorUI/Bit.BlazorUI/Styles/Fluent/shapes.fluent.scss | Defines focus-ring CSS variables and focus shadow token. |
| src/BlazorUI/Bit.BlazorUI/Styles/Fluent/semantic-tokens.fluent.scss | Adds semantic token aliases. |
| src/BlazorUI/Bit.BlazorUI/Styles/Fluent/motion.fluent.scss | Adds motion tokens + reduced-motion overrides. |
| src/BlazorUI/Bit.BlazorUI/Styles/Fluent/forced-colors.fluent.scss | Adds forced-colors + prefers-contrast overrides. |
| src/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent.scss | Imports new Fluent token files. |
| src/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-light.scss | Imports new Fluent token files (light). |
| src/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-dark.scss | Imports new Fluent token files (dark). |
| src/BlazorUI/Bit.BlazorUI/Styles/bit-css.scss | Switches to importing functions (which imports theme variables) and adds focus utilities. |
| src/BlazorUI/Bit.BlazorUI/Extensions/IBitBlazorUIServiceCollectionExtensions.cs | Registers new theming services in DI. |
| src/BlazorUI/Bit.BlazorUI/Components/Utilities/Link/BitLink.scss | Adds focus ring + role-based disabled colors. |
| src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.scss | Adds role-based disabled colors and fixes border-role mapping. |
| src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scss | Adds role-based disabled colors across variants. |
| src/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.scss | Adds role-based disabled colors across variants. |
| src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scss | Adds focus ring + role-based disabled colors. |
| src/BlazorUI/Bit.BlazorUI/Components/Navs/Pagination/BitPagination.scss | Adds role-based disabled colors. |
| src/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.scss | Adds role-based disabled colors. |
| src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scss | Adds focus ring styling. |
| src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.scss | Adds focus ring styling. |
| src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.scss | Adds role-based disabled colors. |
| src/BlazorUI/Bit.BlazorUI/Components/Inputs/Toggle/BitToggle.scss | Adds focus ring styling. |
| src/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.scss | Refactors focus visuals to shared focus-ring mixins (+ error focus). |
| src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scss | Refactors focus visuals to shared focus-ring/underline mixins (+ error focus). |
| src/BlazorUI/Bit.BlazorUI/Components/Inputs/TagsInput/BitTagsInput.scss | Refactors focus visuals to shared focus-ring mixin (+ error focus). |
| src/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.scss | Adds consistent thumb focus ring styling. |
| src/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.scss | Adds focus-visible ring styling (+ error focus). |
| src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.scss | Refactors focus visuals to shared focus-ring mixin (+ error focus). |
| src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss | Refactors focus visuals to shared focus-ring mixin (+ error focus). |
| src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss | Refactors focus visuals to shared focus-ring/underline mixins (+ error focus). |
| src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.scss | Refactors focus visuals to shared focus-ring/underline mixins (+ error focus). |
| src/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.scss | Refactors focus visuals to shared focus-ring/underline mixins (+ error focus). |
| src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scss | Refactors underlined focus visuals to shared mixin. |
| src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scss | Adds focus ring + role-based disabled colors across variants. |
| src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scss | Refactors focus ring + role-based disabled colors. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 17
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss (1)
49-56:⚠️ Potential issue | 🟠 Major | ⚡ Quick winFix invalid-state selector mismatch (
.bit-dtrp-icpvs.bit-dtrp-icn).Line 50 targets
.bit-dtrp-icp, but the rest of this component’s icon-container styling uses.bit-dtrp-icn(including Line 54). This can break invalid border-color styling.🔧 Proposed fix
- .bit-dtrp-icp { + .bit-dtrp-icn { border-color: $clr-err; }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss` around lines 49 - 56, The selector for the invalid state uses the wrong class name: replace the `.bit-dtrp-icp` reference with `.bit-dtrp-icn` so the invalid border-color rule targets the actual icon container used elsewhere; update the rule inside the `&.bit-inv` block (the same block that contains `&.bit-dtrp-foc .bit-dtrp-icn`) so `.bit-dtrp-icn` receives `border-color: $clr-err` consistently with the rest of the DateRangePicker styling.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scss`:
- Around line 29-30: The SCSS inside BitActionButton.scss violates stylelint
rule declaration-empty-line-before because there is no blank line before the
border-radius declaration in the :focus-visible block; open the :focus-visible
block (where `@include` focus-ring(var(--bit-acb-clr-hover)) is used) and insert a
single empty line before the border-radius: $shp-border-radius; declaration so
the sequence has a blank line separating declarations and satisfies the linter.
In `@src/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.scss`:
- Line 10: The CSS custom properties use Sass interpolation syntax (e.g.
--bit-chb-ico-clr: #{var(--bit-chb-clr-txt-sec)};) which trips stylelint;
replace all occurrences of "#{var(...)}" with plain "var(...)" for the checkbox
variables (start with --bit-chb-ico-clr and the group referenced in lines 42-53)
so each assignment reads like --bit-chb-ico-clr: var(--bit-chb-clr-txt-sec); and
similarly for the other custom properties to satisfy
custom-property-no-missing-var-function.
In `@src/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.scss`:
- Around line 21-22: The two invalid comment tokens in BitSlider.scss (the empty
comment "/**/" and the "/*webkit*/" token) break stylelint; replace them with
valid, non-empty comment syntax or remove them entirely—e.g., delete the empty
"/**/" and change "/*webkit*/" to a proper spaced comment like "/* webkit */" or
add the intended vendor-prefixed rule (e.g., "-webkit-..." with a proper
comment), ensuring no empty comments remain so stylelint passes.
In `@src/BlazorUI/Bit.BlazorUI/Components/Inputs/TagsInput/BitTagsInput.scss`:
- Around line 27-30: The stylelint violation is caused by missing blank lines
before declaration blocks; update the SCSS so there is an empty line before the
declarations in the selectors &.bit-tgi-fcs .bit-tgi-cnt and the other block
around lines 50-51 (the second selector that triggers the same rule), i.e.,
insert a single blank line immediately before the first property/declaration
inside those selector blocks so they satisfy declaration-empty-line-before.
In `@src/BlazorUI/Bit.BlazorUI/Styles/bit-css.scss`:
- Line 1: In src/BlazorUI/Bit.BlazorUI/Styles/bit-css.scss the import statement
`@import` "functions.scss"; violates scss/load-partial-extension; remove the .scss
extension so the import reads `@import` "functions"; to reference the partial
correctly and satisfy the stylelint rule.
In `@src/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-dark.scss`:
- Around line 13-17: In bit.blazorui.fluent-dark.scss the three `@import` lines
reference partials with the .scss extension ("motion.fluent.scss",
"forced-colors.fluent.scss", "semantic-tokens.fluent.scss"); remove the ".scss"
extension from each import so they become `@import` "motion.fluent", `@import`
"forced-colors.fluent", and `@import` "semantic-tokens.fluent" to satisfy the
scss/load-partial-extension rule and avoid stylelint failures.
In `@src/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-light.scss`:
- Around line 13-17: Imports in bit.blazorui.fluent-light.scss include the .scss
extension which violates scss/load-partial-extension; update the three `@import`
statements referencing "motion.fluent.scss", "forced-colors.fluent.scss", and
"semantic-tokens.fluent.scss" to omit the .scss extension (e.g. `@import`
"motion.fluent"; `@import` "forced-colors.fluent"; `@import`
"semantic-tokens.fluent";) so they load as SCSS partials and satisfy stylelint.
In `@src/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent.scss`:
- Around line 17-21: The three `@import` statements referencing partials include
the .scss extension which violates scss/load-partial-extension; update the
imports in bit.blazorui.fluent.scss by removing the “.scss” suffix from
"motion.fluent.scss", "forced-colors.fluent.scss", and
"semantic-tokens.fluent.scss" so they become `@import` "motion.fluent", `@import`
"forced-colors.fluent", and `@import` "semantic-tokens.fluent" respectively.
In `@src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scss`:
- Around line 214-218: Add the required blank lines before the comment blocks
around the "req" and "focus (a11y)" comments to satisfy the
scss/double-slash-comment-empty-line-before rule: insert an empty line
immediately before the "//req" comment (the section defining --bit-clr-req) and
before the "//focus (a11y) — color of the focus indicator per role." comment so
the comment blocks preceding the --bit-clr-req variable and the focus
explanation are separated by a blank line.
In `@src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scss`:
- Around line 216-220: The two single-line comments before the variable
declaration violate scss/double-slash-comment-empty-line-before; insert one
blank line immediately above each comment marker (//req and //focus) so there is
an empty line before those comments, keeping the existing comment text and the
--bit-clr-req variable declaration unchanged.
In `@src/BlazorUI/Bit.BlazorUI/Styles/Fluent/forced-colors.fluent.scss`:
- Line 24: Add a single blank line above the comment "// Focus must remain
visible in High Contrast — use system Highlight color and a single solid ring."
inside the forced-colors Fluent SCSS block in forced-colors.fluent.scss so it
satisfies the scss/double-slash-comment-empty-line-before rule; locate the
comment text and insert one empty line immediately before it.
In `@src/BlazorUI/Bit.BlazorUI/Styles/Fluent/shapes.fluent.scss`:
- Around line 19-24: Add a blank line immediately before the comment block that
begins with "//focus ring (a11y) — width is the visible thickness, offset is the
gap between the element and the ring." so the double-slash comment has an empty
line above it (fixes scss/double-slash-comment-empty-line-before); keep the rest
of the block intact including the variable declarations
(--bit-shp-focus-ring-width, --bit-shp-focus-ring-offset, --bit-shd-focus-ring)
and surrounding comments.
In `@src/BlazorUI/Bit.BlazorUI/Styles/functions.scss`:
- Around line 44-49: The focus-ring mixin currently hardcodes a two-layer
box-shadow which ignores the global forced-colors override; update the mixin
(focus-ring) to use the global focus shadow token (CSS variable
--bit-shd-focus-ring) instead of the literal two-layer value so forced-colors
can override it, providing the existing composed value as a fallback (construct
the var(...) with a fallback that uses the current #{$offset},
#{$clr-bg-pri-focus} and #{$color} composition) and keep outline: none
unchanged.
In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts`:
- Around line 183-185: BitTheme currently registers BitTheme._onSchemeChange
with both addEventListener and the legacy addListener on
BitTheme._schemeMediaQuery which can cause duplicate callbacks; change the
registration to feature-detect and call only one API (use addEventListener if
present, otherwise fall back to addListener) when attaching the handler, and
mirror that logic for removal (use removeEventListener if available, otherwise
removeListener) so BitTheme._schemeMediaQuery and BitTheme._onSchemeChange are
only registered once.
In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorDerivation.cs`:
- Around line 30-36: The current logic in BitThemeColorDerivation.cs (inside the
block that checks adjustTextForWcagAa and variants.Main/Text) simply toggles
variants.Text to black or white based on whether it equals "`#000000`", which can
still fail WCAG on dark backgrounds; instead compute contrast ratios for both
candidate colors ("`#000000`" and "`#FFFFFF`") against variants.Main using
BitThemeColorContrast.GetContrastRatio and choose the candidate with the higher
ratio (and assign it to variants.Text), optionally verifying the chosen color
satisfies BitThemeColorContrast.MeetsWcagAaNormalText and falling back to the
better of the two if only one meets the threshold.
In
`@src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorContrastTests.cs`:
- Around line 11-13: Replace the loose threshold assertion for black/white
contrast with a deterministic equality check: call
BitThemeColorContrast.GetContrastRatio("`#000000`", "`#FFFFFF`"), assert the
returned ratio is approximately 21.0 within a small tolerance (e.g., 0.01), and
then use BitThemeColorContrast.MeetsWcagAaNormalText(ratio) to assert
compliance; this makes the test deterministic while still verifying the
MeetsWcagAaNormalText behavior.
---
Outside diff comments:
In
`@src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss`:
- Around line 49-56: The selector for the invalid state uses the wrong class
name: replace the `.bit-dtrp-icp` reference with `.bit-dtrp-icn` so the invalid
border-color rule targets the actual icon container used elsewhere; update the
rule inside the `&.bit-inv` block (the same block that contains `&.bit-dtrp-foc
.bit-dtrp-icn`) so `.bit-dtrp-icn` receives `border-color: $clr-err`
consistently with the rest of the DateRangePicker styling.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: a88c7bf4-5e35-4d3e-acc1-ec9b20c444db
📒 Files selected for processing (111)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ButtonGroup/BitButtonGroup.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TagsInput/BitTagsInput.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Toggle/BitToggle.scsssrc/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Pagination/BitPagination.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scsssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.scsssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Link/BitLink.scsssrc/BlazorUI/Bit.BlazorUI/Extensions/IBitBlazorUIServiceCollectionExtensions.cssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-dark.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-light.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/forced-colors.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/motion.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/semantic-tokens.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/shapes.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/bit-css.scsssrc/BlazorUI/Bit.BlazorUI/Styles/functions.scsssrc/BlazorUI/Bit.BlazorUI/Styles/theme-variables.scsssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitAccentColorPresets.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeJsExtensions.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeLoader.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitTheme.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBreakpoints.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeLayout.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeMotion.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeBreakpointDefaults.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeChangedEventArgs.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorContrast.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorDerivation.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeCookie.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeDensityPresets.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsExtensions.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsNotifierReceiver.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeManager.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeMapper.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeNotifications.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.tssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.scsssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razorsrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorContrastTests.cs
Member
Author
|
@coderabbitai re-review |
|
✅ Actions performedFull review triggered. |
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 114 out of 114 changed files in this pull request and generated 3 comments.
Comments suppressed due to low confidence (1)
src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts:219
invokeMethodAsyncis fired without handling failures. In Blazor Server (or after a circuit disconnect), the stored .NET reference can become invalid and this will surface as an unhandled promise rejection in the browser console on theme changes (including OS-driven changes). Consider wrappinginvokeMethodAsyncwith a.catch(() => { ... })(and possibly clearing_dotnetNotifier) to avoid noisy errors and improve resilience.
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (2)
src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeLoader.cs (2)
16-18: ⚡ Quick winAdd parameter validation for linkElementId and href.
The method accepts string parameters but doesn't validate them. Adding null/empty checks would provide better error messages and prevent unexpected JS errors. The XML documentation already warns about trusted URLs, so validation here reinforces that guidance.
🛡️ Suggested validation
public ValueTask AttachStylesheetAsync(string linkElementId, string href) { + if (string.IsNullOrWhiteSpace(linkElementId)) + throw new ArgumentException("Link element ID cannot be null or empty.", nameof(linkElementId)); + if (string.IsNullOrWhiteSpace(href)) + throw new ArgumentException("Href cannot be null or empty.", nameof(href)); + return _js.BitExternalThemeAttach(linkElementId, href); }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeLoader.cs` around lines 16 - 18, AttachStylesheetAsync currently forwards linkElementId and href to _js.BitExternalThemeAttach without validation; add input checks at the start of BitExternalThemeLoader.AttachStylesheetAsync to throw ArgumentNullException when linkElementId or href is null and ArgumentException (or ArgumentException with nameof()) when either is empty or whitespace, so callers get clear .NET exceptions instead of JS errors, then return the existing _js.BitExternalThemeAttach(linkElementId, href) as before.
21-23: ⚡ Quick winAdd parameter validation for linkElementId.
🛡️ Suggested validation
public ValueTask DetachStylesheetAsync(string linkElementId) { + if (string.IsNullOrWhiteSpace(linkElementId)) + throw new ArgumentException("Link element ID cannot be null or empty.", nameof(linkElementId)); + return _js.BitExternalThemeDetach(linkElementId); }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeLoader.cs` around lines 21 - 23, DetachStylesheetAsync currently forwards linkElementId to _js.BitExternalThemeDetach without validation; add parameter validation in DetachStylesheetAsync to throw ArgumentNullException or ArgumentException when linkElementId is null, empty, or whitespace before calling _js.BitExternalThemeDetach, so callers receive a clear exception instead of passing invalid input into the JS interop call.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss`:
- Around line 100-102: The .bit-drp-nbd rule currently removes the focus ring in
the &:focus selector which eliminates a visible keyboard focus cue; update the
.bit-drp-nbd &:focus block to provide a clear, accessible focus treatment
instead of box-shadow: none (for example restore a subtle visible outline or a
2px focus ring using theme focus color and sufficient contrast), ensuring the
selector is `.bit-drp-nbd` and the modified state is `&:focus`, and keep the
styling keyboard-only-friendly (non-invasive) and high-contrast for
accessibility.
In `@src/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.scss`:
- Around line 22-36: Replace the hardcoded thumb focus box-shadow used in the
input:focus-visible::-webkit-slider-thumb / input:focus::-webkit-slider-thumb
and input:focus-visible::-moz-range-thumb / input:focus::-moz-range-thumb rules
with the global focus-ring shadow token so forced-colors/global theme overrides
apply; specifically remove the manual box-shadow construction and reference the
CSS custom property (e.g. --bit-shd-focus-ring or the project's focus-ring
token) for the thumb focus shadow, preserving the border-color change to
$clr-pri-focus and keeping existing selectors intact.
In `@src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scss`:
- Line 231: The border-focus token --bit-clr-brd-pri-focus is incorrectly
aliased to the primary role --bit-clr-pri; update the alias so the focus token
references the border role instead by changing --bit-clr-brd-pri-focus to use
var(--bit-clr-brd-pri) (so components using border-role focus get the correct
border color). Ensure you update the declaration of --bit-clr-brd-pri-focus in
colors.fluent-dark.scss accordingly.
In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts`:
- Around line 165-170: The shouldFollowSystem() logic allows an explicitly
persisted theme to be overridden by the presence of the bit-theme-system
attribute; change the checks so a persisted explicit theme blocks
system-following: in BitTheme.shouldFollowSystem() first return false if
BitTheme._persist && BitTheme.getPersisted() !== BitTheme.SYSTEM_THEME (i.e., an
explicit persisted theme exists), then keep the existing checks for
BitTheme._stopFollowingSystem and
document.documentElement.hasAttribute('bit-theme-system'); ensure you still
return true only when persisted value equals BitTheme.SYSTEM_THEME or the
attribute is set and no explicit persisted theme prevents it.
In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeChangedEventArgs.cs`:
- Around line 8-12: The BitThemeChangedEventArgs constructor currently assigns
possibly-null parameters to non-nullable properties NewTheme and OldTheme; add
input guards in the BitThemeChangedEventArgs constructor to validate newTheme
and oldTheme and throw ArgumentNullException (or ArgumentException) for null
values before assigning to the NewTheme and OldTheme properties so the
non-nullable contract is preserved.
In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorDerivation.cs`:
- Around line 30-49: The code currently overwrites variants.Text during the WCAG
adjustment even when the caller explicitly provided a non-null text color;
change the logic so adjustments only happen for auto-suggested text (i.e., when
variants.Text was null/unspecified). Concretely, capture the original
variants.Text before the if (adjustTextForWcagAa ...) block (or check at the top
of that block) and only run the contrast calculations/assignments that set
variants.Text when the original variants.Text is null; leave variants.Text
untouched if it was non-null. This touches the adjustTextForWcagAa check and the
assignments to variants.Text (and still uses
BitThemeColorContrast.GetContrastRatio/MeetsWcagAaNormalText with
variants.Main).
---
Nitpick comments:
In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeLoader.cs`:
- Around line 16-18: AttachStylesheetAsync currently forwards linkElementId and
href to _js.BitExternalThemeAttach without validation; add input checks at the
start of BitExternalThemeLoader.AttachStylesheetAsync to throw
ArgumentNullException when linkElementId or href is null and ArgumentException
(or ArgumentException with nameof()) when either is empty or whitespace, so
callers get clear .NET exceptions instead of JS errors, then return the existing
_js.BitExternalThemeAttach(linkElementId, href) as before.
- Around line 21-23: DetachStylesheetAsync currently forwards linkElementId to
_js.BitExternalThemeDetach without validation; add parameter validation in
DetachStylesheetAsync to throw ArgumentNullException or ArgumentException when
linkElementId is null, empty, or whitespace before calling
_js.BitExternalThemeDetach, so callers receive a clear exception instead of
passing invalid input into the JS interop call.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 2ad50f34-04f2-4426-a620-fe354e18d8ee
📒 Files selected for processing (114)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ButtonGroup/BitButtonGroup.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TagsInput/BitTagsInput.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Toggle/BitToggle.scsssrc/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Pagination/BitPagination.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scsssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.scsssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Link/BitLink.scsssrc/BlazorUI/Bit.BlazorUI/Extensions/IBitBlazorUIServiceCollectionExtensions.cssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-dark.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-light.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/forced-colors.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/motion.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/semantic-tokens.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/shapes.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/bit-css.scsssrc/BlazorUI/Bit.BlazorUI/Styles/functions.scsssrc/BlazorUI/Bit.BlazorUI/Styles/theme-variables.scsssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitAccentColorPresets.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeJsExtensions.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeLoader.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitTheme.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBoxShadows.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBreakpoints.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeColors.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeLayout.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeMotion.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeShapes.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeBreakpointDefaults.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeChangedEventArgs.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorContrast.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorDerivation.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeCookie.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeDensityPresets.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsExtensions.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsNotifierReceiver.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeManager.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeMapper.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeNotifications.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.tssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.scsssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razorsrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorContrastTests.cs
Member
Author
|
@coderabbitai re-review |
|
✅ Actions performedFull review triggered. |
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts (1)
59-75:⚠️ Potential issue | 🟠 Major | ⚡ Quick winPersisting resolved light/dark on init breaks system-follow when
persistis enabled.When
systemmode is active with no stored value,initcurrently resolves to a concrete theme (light/dark) and persists it. That makesshouldFollowSystem()immediately stop following OS changes because persisted value is no longer"system".Proposed fix
- if (BitTheme._initOptions.system) { - theme = BitTheme.isSystemDark() ? BitTheme._darkTheme : BitTheme._lightTheme; - } + if (BitTheme._initOptions.system) { + // Persist intent as "system"; set(...) will still apply resolved light/dark to the attribute. + theme = BitTheme.SYSTEM_THEME; + }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts` around lines 59 - 75, The init currently resolves a concrete theme when BitTheme._initOptions.system is true and no persisted value exists, then sets BitTheme._persist and writes that resolved theme which makes BitTheme._stopFollowingSystem true; instead, when system mode is enabled and BitTheme.getPersisted() returns null, do not mark _persist true or overwrite persisted state — call BitTheme.set with the resolved theme only for initial display but avoid toggling BitTheme._persist or writing a persisted value (so leave BitTheme._stopFollowingSystem unchanged and keep SYSTEM_THEME as the effective persisted indicator until the user explicitly picks a theme).
🧹 Nitpick comments (1)
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs (1)
528-533: ⚡ Quick winMake the disabled primary sample explicit.
Line 528 currently relies on default color resolution. For role-color coverage, set primary explicitly so this sample won’t drift if defaults change.
Proposed tweak
-<BitChoiceGroup IsEnabled="false" Label="Primary (default)" DefaultValue="@("A")" TItem="BitChoiceGroupOption<string>" TValue="string" Horizontal> +<BitChoiceGroup IsEnabled="false" Color="BitColor.Primary" Label="Primary" DefaultValue="@("A")" TItem="BitChoiceGroupOption<string>" TValue="string" Horizontal>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs` around lines 528 - 533, The sample BitChoiceGroup is relying on implicit/default color resolution; update the BitChoiceGroup markup (the component named BitChoiceGroup in this sample) to explicitly set the primary color by adding a Color="Primary" attribute (so the disabled primary sample remains explicit) while keeping IsEnabled="false" and DefaultValue="@("A")" and the existing BitChoiceGroupOption children unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scss`:
- Around line 363-366: The .bit-srb-cnt rule is removing box-shadow
unconditionally which suppresses the focus-ring; update the CSS so the no-border
variant does not clear box-shadow on focus (or focus-visible) — e.g., remove the
global "box-shadow: none" from .bit-srb-cnt and instead only neutralize
box-shadow for non-focused states, ensuring the existing focus-ring mixin (used
for :focus / :focus-visible) can still apply; locate the .bit-srb-cnt selector
and adjust its declarations to preserve the focus state styling.
In `@src/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.scss`:
- Around line 25-26: Add a blank line immediately before the inline double-slash
comment that begins "Reference the global focus-ring shadow token..." in
BitSlider.scss so it satisfies the Stylelint rule
scss/double-slash-comment-empty-line-before; ensure you keep the same
indentation and do not alter the comment text or surrounding rules/selectors in
the BitSlider.scss file.
In `@src/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.scss`:
- Around line 12-13: Replace bare uses of the CSS variable --bit-nbr-clr-dis
with a fallback value so disabled text won't inherit unpredictably; update
occurrences of color: var(--bit-nbr-clr-dis) in BitNavBar.scss to something like
color: var(--bit-nbr-clr-dis, var(--bit-nbr-clr, currentColor)) or a concrete
fallback (e.g., rgba(...) ) so the disabled color resolves even when the color
class is missing, and apply the same change to the other occurrence of
var(--bit-nbr-clr-dis).
In `@src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scss`:
- Line 233: Replace the incorrect alias mapping so the border-focus token uses
the border role token instead of the primary palette: update the declaration of
--bit-clr-brd-pri-focus (currently var(--bit-clr-pri)) to reference the border
role token (e.g., var(--bit-clr-brd)) so border-specific focus styling can be
customized independently of --bit-clr-pri.
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.samples.cs`:
- Around line 187-189: Update the disabled "Primary" sample to explicitly set
the color: for the three BitCheckbox usages (the elements with IsEnabled,
Label="Primary", and variations Indeterminate/Value) add
Color="BitColor.Primary" so the disabled color triplet no longer relies on the
default and matches the other color-role samples; target the BitCheckbox
components and the Color property (use BitColor.Primary).
---
Outside diff comments:
In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts`:
- Around line 59-75: The init currently resolves a concrete theme when
BitTheme._initOptions.system is true and no persisted value exists, then sets
BitTheme._persist and writes that resolved theme which makes
BitTheme._stopFollowingSystem true; instead, when system mode is enabled and
BitTheme.getPersisted() returns null, do not mark _persist true or overwrite
persisted state — call BitTheme.set with the resolved theme only for initial
display but avoid toggling BitTheme._persist or writing a persisted value (so
leave BitTheme._stopFollowingSystem unchanged and keep SYSTEM_THEME as the
effective persisted indicator until the user explicitly picks a theme).
---
Nitpick comments:
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs`:
- Around line 528-533: The sample BitChoiceGroup is relying on implicit/default
color resolution; update the BitChoiceGroup markup (the component named
BitChoiceGroup in this sample) to explicitly set the primary color by adding a
Color="Primary" attribute (so the disabled primary sample remains explicit)
while keeping IsEnabled="false" and DefaultValue="@("A")" and the existing
BitChoiceGroupOption children unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: adf23b9c-ffbd-4cf6-b580-cf1476b6b7f2
📒 Files selected for processing (114)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ButtonGroup/BitButtonGroup.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TagsInput/BitTagsInput.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Toggle/BitToggle.scsssrc/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Pagination/BitPagination.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scsssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.scsssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Link/BitLink.scsssrc/BlazorUI/Bit.BlazorUI/Extensions/IBitBlazorUIServiceCollectionExtensions.cssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-dark.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-light.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/forced-colors.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/motion.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/semantic-tokens.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/shapes.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/bit-css.scsssrc/BlazorUI/Bit.BlazorUI/Styles/functions.scsssrc/BlazorUI/Bit.BlazorUI/Styles/theme-variables.scsssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitAccentColorPresets.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeJsExtensions.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeLoader.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitTheme.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBoxShadows.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBreakpoints.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeColors.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeLayout.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeMotion.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeShapes.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeBreakpointDefaults.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeChangedEventArgs.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorContrast.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorDerivation.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeCookie.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeDensityPresets.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsExtensions.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsNotifierReceiver.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeManager.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeMapper.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeNotifications.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.tssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.scsssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razorsrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorContrastTests.cs
Member
Author
|
@coderabbitai re-review |
|
✅ Action performedFull review finished. |
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor (1)
537-629:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winKeep rendered
Colordemo content synchronized withexample11RazorCode.Lines 537-629 render a different structure/content than the
RazorCode="@example11RazorCode"snippet shown to users (defined inBitPivotDemo.razor.cs). This creates copy/paste confusion between what is displayed vs what is documented.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor` around lines 537 - 629, The DemoExample component with Title="Color" contains rendered BitPivot components (with Color parameters for Primary, Secondary, and Success) that do not match the example11RazorCode variable defined in BitPivotDemo.razor.cs. Verify the structure and content of example11RazorCode in the code-behind file, then update the rendered content within the DemoExample block to exactly match that code snippet so that what users see rendered on the page corresponds to what is shown in the RazorCode parameter and available for copy-paste.
♻️ Duplicate comments (4)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss (1)
334-334:⚠️ Potential issue | 🟠 Major | ⚡ Quick winMap secondary/tertiary bg/fg/brd focus vars to actual
-focustokens.Lines 334, 344, 364, 374, 394, and 404 assign
--bit-mnb-clr-focusto base color tokens instead of the corresponding-focustokens, so theme focus-palette overrides won't apply to these variants.💡 Suggested fix
.bit-mnb-sbg { --bit-mnb-clr: #{$clr-bg-sec}; --bit-mnb-clr-txt: #{$clr-fg-pri}; --bit-mnb-clr-hover: #{$clr-bg-sec-hover}; --bit-mnb-clr-active: #{$clr-bg-sec-active}; - --bit-mnb-clr-focus: #{$clr-bg-sec}; + --bit-mnb-clr-focus: #{$clr-bg-sec-focus}; --bit-mnb-clr-dis: #{$clr-bg-sec-dis}; --bit-mnb-clr-dis-text: #{$clr-bg-sec-dis-text}; } .bit-mnb-tbg { --bit-mnb-clr: #{$clr-bg-ter}; --bit-mnb-clr-txt: #{$clr-fg-pri}; --bit-mnb-clr-hover: #{$clr-bg-ter-hover}; --bit-mnb-clr-active: #{$clr-bg-ter-active}; - --bit-mnb-clr-focus: #{$clr-bg-ter}; + --bit-mnb-clr-focus: #{$clr-bg-ter-focus}; --bit-mnb-clr-dis: #{$clr-bg-ter-dis}; --bit-mnb-clr-dis-text: #{$clr-bg-ter-dis-text}; } .bit-mnb-sfg { --bit-mnb-clr: #{$clr-fg-sec}; --bit-mnb-clr-txt: #{$clr-bg-pri}; --bit-mnb-clr-hover: #{$clr-fg-sec-hover}; --bit-mnb-clr-active: #{$clr-fg-sec-active}; - --bit-mnb-clr-focus: #{$clr-fg-sec}; + --bit-mnb-clr-focus: #{$clr-fg-sec-focus}; --bit-mnb-clr-dis: #{$clr-fg-sec-dis}; --bit-mnb-clr-dis-text: #{$clr-fg-sec-dis-text}; } .bit-mnb-tfg { --bit-mnb-clr: #{$clr-fg-ter}; --bit-mnb-clr-txt: #{$clr-bg-pri}; --bit-mnb-clr-hover: #{$clr-fg-ter-hover}; --bit-mnb-clr-active: #{$clr-fg-ter-active}; - --bit-mnb-clr-focus: #{$clr-fg-ter}; + --bit-mnb-clr-focus: #{$clr-fg-ter-focus}; --bit-mnb-clr-dis: #{$clr-fg-ter-dis}; --bit-mnb-clr-dis-text: #{$clr-fg-ter-dis-text}; } .bit-mnb-sbr { --bit-mnb-clr: #{$clr-brd-sec}; --bit-mnb-clr-txt: #{$clr-fg-pri}; --bit-mnb-clr-hover: #{$clr-brd-sec-hover}; --bit-mnb-clr-active: #{$clr-brd-sec-active}; - --bit-mnb-clr-focus: #{$clr-brd-sec}; + --bit-mnb-clr-focus: #{$clr-brd-sec-focus}; --bit-mnb-clr-dis: #{$clr-brd-sec-dis}; --bit-mnb-clr-dis-text: #{$clr-brd-sec-dis-text}; } .bit-mnb-tbr { --bit-mnb-clr: #{$clr-brd-ter}; --bit-mnb-clr-txt: #{$clr-fg-pri}; --bit-mnb-clr-hover: #{$clr-brd-ter-hover}; --bit-mnb-clr-active: #{$clr-brd-ter-active}; - --bit-mnb-clr-focus: #{$clr-brd-ter}; + --bit-mnb-clr-focus: #{$clr-brd-ter-focus}; --bit-mnb-clr-dis: #{$clr-brd-ter-dis}; --bit-mnb-clr-dis-text: #{$clr-brd-ter-dis-text}; }Also applies to: 344-344, 364-364, 374-374, 394-394, 404-404
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss` at line 334, The focus color variable assignments on lines 334, 344, 364, 374, 394, and 404 are using base color tokens (like $clr-bg-sec) instead of their corresponding focus variants (like $clr-bg-sec-focus). Update each of these six lines to append `-focus` to the color token being assigned, so that `--bit-mnb-clr-focus` receives the correct focus-palette token rather than the base color token.src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scss (1)
293-293:⚠️ Potential issue | 🟠 Major | ⚡ Quick winMap secondary/tertiary bg/fg/brd focus vars to actual
-focustokens.Lines 293, 304, 326, 337, 359, and 370 assign
--bit-btn-clr-focusto base color tokens instead of the corresponding-focustokens, so theme focus-palette overrides won't apply to these variants.💡 Suggested fix
.bit-btn-sbg { --bit-btn-clr: #{$clr-bg-sec}; --bit-btn-clr-txt: #{$clr-fg-pri}; --bit-btn-clr-hover: #{$clr-bg-sec-hover}; --bit-btn-clr-active: #{$clr-bg-sec-active}; - --bit-btn-clr-focus: #{$clr-bg-sec}; + --bit-btn-clr-focus: #{$clr-bg-sec-focus}; --bit-btn-clr-spn: #{$clr-fg-pri}; --bit-btn-clr-dis: #{$clr-bg-sec-dis}; --bit-btn-clr-dis-text: #{$clr-bg-sec-dis-text}; } .bit-btn-tbg { --bit-btn-clr: #{$clr-bg-ter}; --bit-btn-clr-txt: #{$clr-fg-pri}; --bit-btn-clr-hover: #{$clr-bg-ter-hover}; --bit-btn-clr-active: #{$clr-bg-ter-active}; - --bit-btn-clr-focus: #{$clr-bg-ter}; + --bit-btn-clr-focus: #{$clr-bg-ter-focus}; --bit-btn-clr-spn: #{$clr-fg-pri}; --bit-btn-clr-dis: #{$clr-bg-ter-dis}; --bit-btn-clr-dis-text: #{$clr-bg-ter-dis-text}; } .bit-btn-sfg { --bit-btn-clr: #{$clr-fg-sec}; --bit-btn-clr-txt: #{$clr-bg-pri}; --bit-btn-clr-hover: #{$clr-fg-sec-hover}; --bit-btn-clr-active: #{$clr-fg-sec-active}; - --bit-btn-clr-focus: #{$clr-fg-sec}; + --bit-btn-clr-focus: #{$clr-fg-sec-focus}; --bit-btn-clr-spn: #{$clr-bg-pri}; --bit-btn-clr-dis: #{$clr-fg-sec-dis}; --bit-btn-clr-dis-text: #{$clr-fg-sec-dis-text}; } .bit-btn-tfg { --bit-btn-clr: #{$clr-fg-ter}; --bit-btn-clr-txt: #{$clr-bg-pri}; --bit-btn-clr-hover: #{$clr-fg-ter-hover}; --bit-btn-clr-active: #{$clr-fg-ter-active}; - --bit-btn-clr-focus: #{$clr-fg-ter}; + --bit-btn-clr-focus: #{$clr-fg-ter-focus}; --bit-btn-clr-spn: #{$clr-bg-pri}; --bit-btn-clr-dis: #{$clr-fg-ter-dis}; --bit-btn-clr-dis-text: #{$clr-fg-ter-dis-text}; } .bit-btn-sbr { --bit-btn-clr: #{$clr-brd-sec}; --bit-btn-clr-txt: #{$clr-fg-pri}; --bit-btn-clr-hover: #{$clr-brd-sec-hover}; --bit-btn-clr-active: #{$clr-brd-sec-active}; - --bit-btn-clr-focus: #{$clr-brd-sec}; + --bit-btn-clr-focus: #{$clr-brd-sec-focus}; --bit-btn-clr-spn: #{$clr-fg-pri}; --bit-btn-clr-dis: #{$clr-brd-sec-dis}; --bit-btn-clr-dis-text: #{$clr-brd-sec-dis-text}; } .bit-btn-tbr { --bit-btn-clr: #{$clr-brd-ter}; --bit-btn-clr-txt: #{$clr-fg-pri}; --bit-btn-clr-hover: #{$clr-brd-ter-hover}; --bit-btn-clr-active: #{$clr-brd-ter-active}; - --bit-btn-clr-focus: #{$clr-brd-ter}; + --bit-btn-clr-focus: #{$clr-brd-ter-focus}; --bit-btn-clr-spn: #{$clr-fg-pri}; --bit-btn-clr-dis: #{$clr-brd-ter-dis}; --bit-btn-clr-dis-text: #{$clr-brd-ter-dis-text}; }Also applies to: 304-304, 326-326, 337-337, 359-359, 370-370
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scss` at line 293, In the BitButton.scss file, multiple lines (293, 304, 326, 337, 359, and 370) are assigning the --bit-btn-clr-focus CSS custom property to base color tokens instead of their corresponding focus-variant tokens. To fix this, locate each of these lines and replace the base color token references with their -focus variants. For example, if a line contains --bit-btn-clr-focus assigned to a base token like $clr-bg-sec, change it to use $clr-bg-sec-focus. Do this for all six affected lines to ensure that theme focus-palette overrides will properly apply to the secondary and tertiary button variants.src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scss (1)
256-257:⚠️ Potential issue | 🟠 Major | ⚡ Quick winUse per-role focus tokens for secondary/tertiary bg/fg/br variants.
Line [256], Line [269], Line [295], Line [308], Line [334], and Line [347] set
--bit-tgb-clr-focusto non-focus tokens, soColor.*.Focusoverrides for these variants never apply.💡 Minimal patch
.bit-tgb-sbg { - --bit-tgb-clr-focus: #{$clr-bg-sec}; + --bit-tgb-clr-focus: #{$clr-bg-sec-focus}; } .bit-tgb-tbg { - --bit-tgb-clr-focus: #{$clr-bg-ter}; + --bit-tgb-clr-focus: #{$clr-bg-ter-focus}; } .bit-tgb-sfg { - --bit-tgb-clr-focus: #{$clr-fg-sec}; + --bit-tgb-clr-focus: #{$clr-fg-sec-focus}; } .bit-tgb-tfg { - --bit-tgb-clr-focus: #{$clr-fg-ter}; + --bit-tgb-clr-focus: #{$clr-fg-ter-focus}; } .bit-tgb-sbr { - --bit-tgb-clr-focus: #{$clr-brd-sec}; + --bit-tgb-clr-focus: #{$clr-brd-sec-focus}; } .bit-tgb-tbr { - --bit-tgb-clr-focus: #{$clr-brd-ter}; + --bit-tgb-clr-focus: #{$clr-brd-ter-focus}; }Also applies to: 269-270, 295-296, 308-309, 334-335, 347-348
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scss` around lines 256 - 257, The --bit-tgb-clr-focus CSS variable in BitToggleButton.scss is being assigned non-focus tokens (like $clr-bg-sec) instead of proper focus tokens for the secondary, secondary-dark, tertiary, and tertiary-dark variants. This prevents Color.*.Focus overrides from applying correctly. Replace the values assigned to --bit-tgb-clr-focus on lines 256, 269, 295, 308, 334, and 347 with the appropriate focus token variants (e.g., use $clr-bg-sec-focus instead of $clr-bg-sec, and $clr-bg-sec-dark-focus instead of $clr-bg-sec-dark) for each corresponding variant to ensure focus states render properly.src/BlazorUI/Bit.BlazorUI/Components/Layouts/Grid/BitGrid.scss (1)
1-1:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winRemove the
.scssextension from the partial import to satisfy stylelint.The import still includes
.scsswhich triggersscss/load-partial-extension. Use extensionless import.🔧 Proposed fix
-@import "../../../Styles/functions.scss"; +@import "../../../Styles/functions";🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Components/Layouts/Grid/BitGrid.scss` at line 1, The `@import` statement in BitGrid.scss includes the .scss extension which violates the scss/load-partial-extension stylelint rule. Remove the .scss extension from the import path in the `@import` statement so that the functions partial is imported without an extension, changing "../../../Styles/functions.scss" to "../../../Styles/functions".Source: Linters/SAST tools
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss`:
- Around line 33-35: The focus-ring mixin applied at line 34 within the `:focus`
selector has higher specificity than the no-border style overrides in the
subsequent rules (lines 101-109), causing the no-border underline to be bypassed
when both bit-inv and bit-drp-nbd classes are active simultaneously. Add an
explicit CSS rule that handles the bit-inv + bit-drp-nbd focus precedence by
either modifying the focus ring application to be aware of the no-border state
or by adding a more specific selector that ensures the no-border styling takes
precedence in the focus state when both classes are present.
In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeLoader.cs`:
- Around line 25-37: The XML documentation and comments for the
AttachStylesheetAsync method incorrectly state that absolute http/https URLs are
accepted and that the JS side does no validation, but the corresponding
JavaScript in BitTheme.ts actually validates for same-origin URLs and rejects
non-same-origin ones. Update the param documentation at line 25 and the comments
in lines 31-37 to accurately reflect that only same-origin relative paths and
same-origin absolute http/https URLs are accepted, and clarify that the JS side
does perform same-origin validation to align the C# contract with the actual JS
behavior.
In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeSerialization.cs`:
- Around line 42-64: The Normalize method has conflicting nullability contracts:
the parameter BitTheme theme is declared as non-nullable, but the XML
documentation states null is accepted and the implementation has a null check.
To fix this, choose Option A (make the method signature nullable by changing
BitTheme theme to BitTheme? theme and the return type to BitTheme?, keeping the
current null-check logic on line 57) or Option B (remove the null check
entirely, remove the force non-null operator ! on line 62, and update the XML
documentation to remove the statement about null arguments being ignored).
Either approach ensures the parameter type, documentation, and implementation
are consistent.
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor`:
- Around line 354-366: The wrapper div for the disabled Background color
variants uses an inconsistent background token compared to the enabled variants
demo section. Change the style attribute value from `var(--bit-clr-fg-sec)` to
`var(--bit-clr-bg-dis)` in the div that contains the disabled BitSearchBox
components with Background colors to match the token used for the enabled
Background variants demo.
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor.samples.cs`:
- Around line 278-280: The "Disabled:" heading in the BitTimeline sample snippet
uses raw text instead of a formatted heading block that matches the rendered
demo presentation. Replace the raw "Disabled:" text with the same formatted
heading structure used in other sample sections of the rendered demo to maintain
consistency and prevent documentation/source drift between the snippet and the
actual rendered output.
---
Outside diff comments:
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor`:
- Around line 537-629: The DemoExample component with Title="Color" contains
rendered BitPivot components (with Color parameters for Primary, Secondary, and
Success) that do not match the example11RazorCode variable defined in
BitPivotDemo.razor.cs. Verify the structure and content of example11RazorCode in
the code-behind file, then update the rendered content within the DemoExample
block to exactly match that code snippet so that what users see rendered on the
page corresponds to what is shown in the RazorCode parameter and available for
copy-paste.
---
Duplicate comments:
In `@src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scss`:
- Line 293: In the BitButton.scss file, multiple lines (293, 304, 326, 337, 359,
and 370) are assigning the --bit-btn-clr-focus CSS custom property to base color
tokens instead of their corresponding focus-variant tokens. To fix this, locate
each of these lines and replace the base color token references with their
-focus variants. For example, if a line contains --bit-btn-clr-focus assigned to
a base token like $clr-bg-sec, change it to use $clr-bg-sec-focus. Do this for
all six affected lines to ensure that theme focus-palette overrides will
properly apply to the secondary and tertiary button variants.
In `@src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss`:
- Line 334: The focus color variable assignments on lines 334, 344, 364, 374,
394, and 404 are using base color tokens (like $clr-bg-sec) instead of their
corresponding focus variants (like $clr-bg-sec-focus). Update each of these six
lines to append `-focus` to the color token being assigned, so that
`--bit-mnb-clr-focus` receives the correct focus-palette token rather than the
base color token.
In
`@src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scss`:
- Around line 256-257: The --bit-tgb-clr-focus CSS variable in
BitToggleButton.scss is being assigned non-focus tokens (like $clr-bg-sec)
instead of proper focus tokens for the secondary, secondary-dark, tertiary, and
tertiary-dark variants. This prevents Color.*.Focus overrides from applying
correctly. Replace the values assigned to --bit-tgb-clr-focus on lines 256, 269,
295, 308, 334, and 347 with the appropriate focus token variants (e.g., use
$clr-bg-sec-focus instead of $clr-bg-sec, and $clr-bg-sec-dark-focus instead of
$clr-bg-sec-dark) for each corresponding variant to ensure focus states render
properly.
In `@src/BlazorUI/Bit.BlazorUI/Components/Layouts/Grid/BitGrid.scss`:
- Line 1: The `@import` statement in BitGrid.scss includes the .scss extension
which violates the scss/load-partial-extension stylelint rule. Remove the .scss
extension from the import path in the `@import` statement so that the functions
partial is imported without an extension, changing
"../../../Styles/functions.scss" to "../../../Styles/functions".
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 2da98d72-91dc-47fe-a908-8056777c2d87
📒 Files selected for processing (136)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ButtonGroup/BitButtonGroup.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TagsInput/BitTagsInput.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Toggle/BitToggle.scsssrc/BlazorUI/Bit.BlazorUI/Components/Layouts/Grid/BitGrid.scsssrc/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Pagination/BitPagination.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scsssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.scsssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Link/BitLink.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/MediaQuery/BitMediaQuery.razor.cssrc/BlazorUI/Bit.BlazorUI/Extensions/IBitBlazorUIServiceCollectionExtensions.cssrc/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/IJSRuntimeExtensions.cssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-dark.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-light.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/forced-colors.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/motion.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/semantic-tokens.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/shapes.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/bit-css.scsssrc/BlazorUI/Bit.BlazorUI/Styles/functions.scsssrc/BlazorUI/Bit.BlazorUI/Styles/media-queries.scsssrc/BlazorUI/Bit.BlazorUI/Styles/theme-variables.scsssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitAccentColorPresets.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeJsExtensions.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeLoader.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme.tssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitTheme.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBoxShadows.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBreakpoints.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeColors.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeLayout.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeMotion.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeShapes.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeTypography.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeAttributeNames.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeBreakpointDefaults.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeChangedEventArgs.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorContrast.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorDerivation.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeCookie.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeDensityPresets.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsExtensions.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsNotifierReceiver.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeManager.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeMapper.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeName.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeNotifications.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeProvider.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeSerialization.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeSsr.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeUtilities.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.tssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.scsssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Scripts/app.tssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorContrastTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorDerivationTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeManagerTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeMapperContractTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeMapperMergeDriftTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeModelCoverageTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeProviderHtmlAttributesTest.razorsrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeProviderTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeSsrTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/ThemeProbeConsumer.cs
💤 Files with no reviewable changes (1)
- src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts
Member
Author
|
@coderabbitai re-review |
|
✅ Action performedFull review finished. |
There was a problem hiding this comment.
Actionable comments posted: 6
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.scss (1)
49-60:⚠️ Potential issue | 🟠 Major | ⚡ Quick winUnderlined invalid DatePicker loses error styling when not focused.
Line 51 uses
border-color, but Line 715 removes that border for.bit-dtp-und, so invalid state is not visible until focus.🔧 Proposed fix
&.bit-inv { .bit-dtp-icn { border-color: $clr-err; } + &.bit-dtp-und .bit-dtp-icn { + box-shadow: inset 0 calc(-1 * #{$shp-border-width}) 0 0 #{$clr-err}; + } + &.bit-dtp-foc:not(.bit-dtp-und) .bit-dtp-icn { `@include` focus-ring($clr-err-focus); }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.scss` around lines 49 - 60, The invalid DatePicker styling in the bit-inv block relies on border-color for the bit-dtp-icn icon, but this border is removed for underlined variants (bit-dtp-und), making the error state invisible when not focused. Modify the bit-inv styling to include an alternative error indicator for the bit-dtp-und.bit-dtp-icn combination when it is not focused (not inside bit-dtp-foc), such as using a bottom-border, box-shadow, or outline instead of the standard border-color, so the invalid state remains visually apparent even without focus on underlined DatePicker variants.src/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.scss (1)
43-54:⚠️ Potential issue | 🟠 Major | ⚡ Quick winUnderlined invalid state has no visible error cue until focus.
Line 45 sets
border-color, but Line 146 removes the border in underline mode, so.bit-inv.bit-ctp-undlooks non-invalid when unfocused.🔧 Proposed fix
&.bit-inv { .bit-ctp-icn { border-color: $clr-err; } + &.bit-ctp-und .bit-ctp-icn { + box-shadow: inset 0 calc(-1 * #{$shp-border-width}) 0 0 #{$clr-err}; + } + &.bit-ctp-foc:not(.bit-ctp-und) .bit-ctp-icn { `@include` focus-ring($clr-err-focus); }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.scss` around lines 43 - 54, The invalid underlined state lacks a visible error indicator when unfocused because the border-color set on `.bit-inv .bit-ctp-icn` is removed in underline mode at line 146. Add a new style rule for the `.bit-inv.bit-ctp-und .bit-ctp-icn` selector (the combined invalid and underline state) that applies the error color to the underline element instead of relying on the border, ensuring the error cue is visible even before focus is applied to the component.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scss`:
- Around line 320-330: The focus styling in BitTextField is using the base color
token var(--bit-tfl-clr) instead of a dedicated focus token, which bypasses the
proper focus theme semantics. Replace var(--bit-tfl-clr) with
var(--bit-tfl-clr-focus) in both the focus-ring mixin call on the .bit-tfl-fgp
class and the focus-underline-ring mixin call on the .bit-tfl-wrp class. Then,
for each color variant class (.bit-tfl-*), define the new CSS variable
--bit-tfl-clr-focus and assign it the corresponding focus color token (such as
$clr-*-focus) to ensure consistent focus contrast across all variants.
In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeName.cs`:
- Around line 53-57: The Custom method in BitThemeName currently accepts any
non-whitespace string after normalization, but this does not align with SSR
token parsing rules which only accept normalized characters matching the pattern
[a-z0-9-] with a maximum length limit. Update the Custom method to validate that
the trimmed and lowercased name contains only alphanumeric characters and
hyphens, and enforce the same maximum length constraint that the SSR theme-token
parsing uses. This will ensure runtime and SSR theme validation are consistent
and prevent first-paint consistency issues for persisted custom themes.
In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeSsr.cs`:
- Around line 152-164: The inline script in BitThemeSsr.cs has a malformed IIFE
terminator on the final line (164) that includes an extra closing brace. The
current ending `r.setAttribute('{theme}',cur);}})();` has an extra brace before
the function terminator. Remove the extra closing brace so the line properly
ends with `r.setAttribute('{theme}',cur);})();` to fix the JavaScript syntax
error in the generated bootstrap script.
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cs`:
- Around line 281-292: The disabled PrimaryBackground, SecondaryBackground, and
TertiaryBackground BitButtonGroup components in the code snippet are missing the
dark container wrapper that appears in the rendered demo, causing a visual
mismatch between the displayed sample and actual rendered output. Wrap the three
groups of disabled BitButtonGroup components (those with IsEnabled="false" and
Color="BitColor.PrimaryBackground/SecondaryBackground/TertiaryBackground") in a
dark container element to match how they are rendered in the actual demo view,
ensuring the markup accurately reflects what users see visually.
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor.cs`:
- Around line 377-378: The example8RazorCode snippet on line 377 contains a raw
unformatted "Disabled:" heading that does not match the formatted heading used
in the rendered demo markup, causing a visual inconsistency. Update the
example8RazorCode string to use the same formatted heading syntax as the demo
markup so that the code snippet and rendered output remain aligned and
consistent.
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razor`:
- Line 972: The BitToggleButton component's Text attribute contains malformed
quoting with nested double quotes that will cause parsing errors. In the
ToggleTheme example, replace the double quotes around the string literals
"Light" and "Dark" within the ternary operator expression with single quotes so
the attribute value delimiters don't conflict with the inner string delimiters.
This will allow the code to parse correctly when developers copy and use this
example.
---
Outside diff comments:
In
`@src/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.scss`:
- Around line 43-54: The invalid underlined state lacks a visible error
indicator when unfocused because the border-color set on `.bit-inv .bit-ctp-icn`
is removed in underline mode at line 146. Add a new style rule for the
`.bit-inv.bit-ctp-und .bit-ctp-icn` selector (the combined invalid and underline
state) that applies the error color to the underline element instead of relying
on the border, ensuring the error cue is visible even before focus is applied to
the component.
In `@src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.scss`:
- Around line 49-60: The invalid DatePicker styling in the bit-inv block relies
on border-color for the bit-dtp-icn icon, but this border is removed for
underlined variants (bit-dtp-und), making the error state invisible when not
focused. Modify the bit-inv styling to include an alternative error indicator
for the bit-dtp-und.bit-dtp-icn combination when it is not focused (not inside
bit-dtp-foc), such as using a bottom-border, box-shadow, or outline instead of
the standard border-color, so the invalid state remains visually apparent even
without focus on underlined DatePicker variants.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 9ed53c98-879e-4423-abe2-4df7d0062ca9
📒 Files selected for processing (136)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ButtonGroup/BitButtonGroup.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TagsInput/BitTagsInput.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Toggle/BitToggle.scsssrc/BlazorUI/Bit.BlazorUI/Components/Layouts/Grid/BitGrid.scsssrc/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Pagination/BitPagination.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scsssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.scsssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Link/BitLink.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/MediaQuery/BitMediaQuery.razor.cssrc/BlazorUI/Bit.BlazorUI/Extensions/IBitBlazorUIServiceCollectionExtensions.cssrc/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/IJSRuntimeExtensions.cssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-dark.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-light.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/forced-colors.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/motion.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/semantic-tokens.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/shapes.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/bit-css.scsssrc/BlazorUI/Bit.BlazorUI/Styles/functions.scsssrc/BlazorUI/Bit.BlazorUI/Styles/media-queries.scsssrc/BlazorUI/Bit.BlazorUI/Styles/theme-variables.scsssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitAccentColorPresets.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeJsExtensions.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeLoader.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme.tssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitTheme.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBoxShadows.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBreakpoints.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeColors.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeLayout.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeMotion.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeShapes.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeTypography.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeAttributeNames.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeBreakpointDefaults.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeChangedEventArgs.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorContrast.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorDerivation.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeCookie.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeDensityPresets.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsExtensions.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsNotifierReceiver.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeManager.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeMapper.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeName.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeNotifications.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeProvider.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeSerialization.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeSsr.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeUtilities.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.tssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.scsssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Scripts/app.tssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorContrastTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorDerivationTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeManagerTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeMapperContractTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeMapperMergeDriftTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeModelCoverageTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeProviderHtmlAttributesTest.razorsrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeProviderTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeSsrTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/ThemeProbeConsumer.cs
💤 Files with no reviewable changes (1)
- src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts
Member
Author
|
@coderabbitai re-review |
|
✅ Action performedFull review finished. |
There was a problem hiding this comment.
Actionable comments posted: 6
♻️ Duplicate comments (4)
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cs (1)
489-517:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winWrap disabled
*Backgroundsamples in the same dark container as the live demo.These nine disabled background examples are still not wrapped with the dark background container used in
_BitButtonGroupOptionDemo.razor, so the sample text doesn’t match rendered demo context.Suggested patch
<!-- Disabled: --> -<BitButtonGroup IsEnabled=""false"" Color=""BitColor.PrimaryBackground"" Variant=""BitVariant.Fill"" TItem=""BitButtonGroupOption""> - <BitButtonGroupOption Text=""Add"" /><BitButtonGroupOption Text=""Edit"" /><BitButtonGroupOption Text=""Delete"" /> -</BitButtonGroup> -... -<BitButtonGroup IsEnabled=""false"" Color=""BitColor.TertiaryBackground"" Variant=""BitVariant.Text"" TItem=""BitButtonGroupOption""> - <BitButtonGroupOption Text=""Add"" /><BitButtonGroupOption Text=""Edit"" /><BitButtonGroupOption Text=""Delete"" /> -</BitButtonGroup> +<div style=""background:var(--bit-clr-fg-sec);padding:1rem""> + <BitButtonGroup IsEnabled=""false"" Color=""BitColor.PrimaryBackground"" Variant=""BitVariant.Fill"" TItem=""BitButtonGroupOption""> + <BitButtonGroupOption Text=""Add"" /><BitButtonGroupOption Text=""Edit"" /><BitButtonGroupOption Text=""Delete"" /> + </BitButtonGroup> + ... + <BitButtonGroup IsEnabled=""false"" Color=""BitColor.TertiaryBackground"" Variant=""BitVariant.Text"" TItem=""BitButtonGroupOption""> + <BitButtonGroupOption Text=""Add"" /><BitButtonGroupOption Text=""Edit"" /><BitButtonGroupOption Text=""Delete"" /> + </BitButtonGroup> +</div>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cs` around lines 489 - 517, The nine disabled BitButtonGroup samples with PrimaryBackground, SecondaryBackground, and TertiaryBackground colors are not wrapped in the dark background container that is used in the main _BitButtonGroupOptionDemo.razor demo, causing the sample text rendering to not match the actual rendered context. Wrap all nine BitButtonGroup components (three for each background color with Fill, Outline, and Text variants) in the same dark container element that is used elsewhere in the demo file to ensure the sample presentation matches the live demo display.src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.samples.cs (1)
62-64:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winUse a visible disabled heading in the snippet for parity with the demo.
Line [62] uses
<!-- Disabled: -->, which doesn’t match the rendered demo structure and makes scanning the snippet harder.Suggested fix
-<!-- Disabled: --> +<div><b>Disabled</b>:</div> +<br />🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.samples.cs` around lines 62 - 64, The snippet uses an HTML comment `<!-- Disabled: -->` as a label, which doesn't provide a visible heading and doesn't match the demo's structure. Replace the HTML comment with a proper visible heading element (such as an h4 or heading component) that displays "Disabled" as text, ensuring consistency with how other demo sections are labeled in the BitPaginationDemo component.src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor.cs (1)
377-378:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winAlign disabled section heading formatting with the rendered demo.
Line [377] still uses raw
Disabled:text in the snippet, which drifts from the formatted heading style used in demo markup.Suggested fix
-Disabled: +<div><b>Disabled</b>:</div> +<br />🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor.cs` around lines 377 - 378, The raw text "Disabled:" at line 377 in the timeline option demo does not match the formatted heading style used in the actual demo markup. Apply the same formatting style and structure used for other demo section headings in the demo markup to the "Disabled:" section heading to ensure consistency between the code snippet and the rendered demo output.src/BlazorUI/Bit.BlazorUI/Components/Layouts/Grid/BitGrid.scss (1)
1-1:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winRemove
.scssfrom the partial import to satisfy stylelint.This still triggers
scss/load-partial-extensionand can fail lint checks.Suggested fix
-@import "../../../Styles/functions.scss"; +@import "../../../Styles/functions";🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Components/Layouts/Grid/BitGrid.scss` at line 1, Remove the `.scss` file extension from the import path in the statement that imports the functions partial file. The scss/load-partial-extension stylelint rule requires that partial SCSS files should be imported without their file extensions, so change the path to reference just the directory and partial name without the .scss suffix.Source: Linters/SAST tools
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scss`:
- Around line 29-31: The focus-ring mixin in BitActionButton.scss is currently
using the hover color token (--bit-acb-clr-hover) instead of a dedicated focus
token, which prevents role-specific focus palette overrides from applying
correctly. Replace all instances of var(--bit-acb-clr-hover) passed to the
focus-ring mixin with a dedicated focus color token (--bit-acb-clr-focus)
throughout the file, including the occurrences around lines 29 and the range
mentioned (117-235). This ensures focus styling respects component role-based
customizations consistent with other migrated components.
In `@src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.scss`:
- Around line 20-22: The disabled timeline color variables --bit-tln-clr-dis,
--bit-tln-clr-bg-dis, and --bit-tln-clr-brd-dis lack fallback values, causing
undefined behavior when a status class is not applied. Update these three
variable definitions to include fallback values using CSS custom property syntax
(var(primary-var, fallback-var)) so that meaningful disabled colors are always
available even without role-based overrides. Apply the same fix to the
corresponding variables at line 52 as well.
In `@src/BlazorUI/Bit.BlazorUI/Styles/Fluent/forced-colors.fluent.scss`:
- Around line 25-37: The forced-colors overrides in the SCSS file are
incomplete. The primary focus color tokens have explicit overrides for
foreground, background, and border variants (--bit-clr-fg-pri-focus,
--bit-clr-bg-pri-focus, --bit-clr-brd-pri-focus), but the secondary and tertiary
variants lack these specific overrides. Add the missing CSS custom property
overrides for secondary and tertiary focus colors by following the same pattern
as the primary focus overrides: define --bit-clr-fg-sec-focus,
--bit-clr-bg-sec-focus, --bit-clr-brd-sec-focus, --bit-clr-fg-ter-focus,
--bit-clr-bg-ter-focus, and --bit-clr-brd-ter-focus with appropriate Highlight
and Canvas values to maintain high-contrast consistency across all focus color
variants.
In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorDerivation.cs`:
- Around line 50-56: The code in the WCAG AA adjustment block does not validate
that variants.Main is a valid hex color before passing it to
BitThemeColorContrast.GetContrastRatio, which will throw an exception if
variants.Main contains a non-hex value supplied by the caller. Add a validation
check to ensure variants.Main is a valid hex color format before proceeding with
the GetContrastRatio calls with both the black and white color values. The
validation should be added after confirming that variants.Main is not null or
whitespace but before attempting to calculate the contrast ratios.
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cs`:
- Around line 806-830: The disabled sample blocks for the *Background color
variants (PrimaryBackground, SecondaryBackground, and TertiaryBackground) in the
BitMenuButton components are not wrapped in a dark background container, which
causes their appearance to diverge from how they are displayed in the live demo.
Wrap all the disabled BitMenuButton components showing these three background
color groups (including all their Variant and Split combinations) inside a dark
background wrapper container to ensure the sample snippets visually match the
live rendered demo.
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razor.samples.cs`:
- Around line 121-131: The disabled BitLink sample markup in the code section
needs to be reorganized to match the grouped structure used in the rendered
demo. Wrap the BitLink components that use BitColor.PrimaryBackground,
SecondaryBackground, and TertiaryBackground into a single grouped container div,
then create separate container divs for the Foreground group (PrimaryForeground,
SecondaryForeground, TertiaryForeground) and the Border group (PrimaryBorder,
SecondaryBorder, TertiaryBorder). This will ensure the sample code structure
aligns with the actual rendered demo presentation and prevents copy/paste
mismatches in documentation.
---
Duplicate comments:
In `@src/BlazorUI/Bit.BlazorUI/Components/Layouts/Grid/BitGrid.scss`:
- Line 1: Remove the `.scss` file extension from the import path in the
statement that imports the functions partial file. The
scss/load-partial-extension stylelint rule requires that partial SCSS files
should be imported without their file extensions, so change the path to
reference just the directory and partial name without the .scss suffix.
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cs`:
- Around line 489-517: The nine disabled BitButtonGroup samples with
PrimaryBackground, SecondaryBackground, and TertiaryBackground colors are not
wrapped in the dark background container that is used in the main
_BitButtonGroupOptionDemo.razor demo, causing the sample text rendering to not
match the actual rendered context. Wrap all nine BitButtonGroup components
(three for each background color with Fill, Outline, and Text variants) in the
same dark container element that is used elsewhere in the demo file to ensure
the sample presentation matches the live demo display.
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor.cs`:
- Around line 377-378: The raw text "Disabled:" at line 377 in the timeline
option demo does not match the formatted heading style used in the actual demo
markup. Apply the same formatting style and structure used for other demo
section headings in the demo markup to the "Disabled:" section heading to ensure
consistency between the code snippet and the rendered demo output.
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.samples.cs`:
- Around line 62-64: The snippet uses an HTML comment `<!-- Disabled: -->` as a
label, which doesn't provide a visible heading and doesn't match the demo's
structure. Replace the HTML comment with a proper visible heading element (such
as an h4 or heading component) that displays "Disabled" as text, ensuring
consistency with how other demo sections are labeled in the BitPaginationDemo
component.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 3b723af7-7175-4907-a638-b2edd17295c2
📒 Files selected for processing (136)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ButtonGroup/BitButtonGroup.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TagsInput/BitTagsInput.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Toggle/BitToggle.scsssrc/BlazorUI/Bit.BlazorUI/Components/Layouts/Grid/BitGrid.scsssrc/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Pagination/BitPagination.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scsssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.scsssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Link/BitLink.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/MediaQuery/BitMediaQuery.razor.cssrc/BlazorUI/Bit.BlazorUI/Extensions/IBitBlazorUIServiceCollectionExtensions.cssrc/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/IJSRuntimeExtensions.cssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-dark.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-light.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/forced-colors.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/motion.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/semantic-tokens.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/shapes.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/bit-css.scsssrc/BlazorUI/Bit.BlazorUI/Styles/functions.scsssrc/BlazorUI/Bit.BlazorUI/Styles/media-queries.scsssrc/BlazorUI/Bit.BlazorUI/Styles/theme-variables.scsssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitAccentColorPresets.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeJsExtensions.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeLoader.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme.tssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitTheme.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBoxShadows.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBreakpoints.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeColors.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeLayout.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeMotion.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeShapes.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeTypography.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeAttributeNames.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeBreakpointDefaults.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeChangedEventArgs.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorContrast.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorDerivation.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeCookie.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeDensityPresets.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsExtensions.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsNotifierReceiver.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeManager.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeMapper.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeName.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeNotifications.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeProvider.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeSerialization.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeSsr.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeUtilities.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.tssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.scsssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Scripts/app.tssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorContrastTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorDerivationTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeManagerTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeMapperContractTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeMapperMergeDriftTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeModelCoverageTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeProviderHtmlAttributesTest.razorsrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeProviderTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeSsrTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/ThemeProbeConsumer.cs
💤 Files with no reviewable changes (1)
- src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts
Member
Author
|
@coderabbitai re-review |
|
✅ Action performedReview finished.
|
Member
Author
|
@coderabbitai re-review |
|
✅ Action performedReview finished.
|
Member
Author
|
@coderabbitai re-review |
|
✅ Action performedReview finished.
|
Member
Author
|
@coderabbitai full-review |
|
✅ Action performedFull review finished. |
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (2)
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor (1)
354-366: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick winWrapper background token inconsistency still unresolved.
Line 354 uses
var(--bit-clr-fg-sec)for the disabled Background wrapper, while the enabled Background demo (line 48) usesvar(--bit-clr-bg-dis). This was flagged previously and not addressed.🎯 Suggested fix
- <div style="background:var(--bit-clr-fg-sec);padding:1rem"> + <div style="background:var(--bit-clr-bg-dis);padding:1rem">🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor` around lines 354 - 366, The disabled Background demo wrapper in BitSearchBoxDemo.razor still uses the wrong theme token; update the wrapper around the Background examples to match the enabled Background demo’s token usage. Use the existing BitSearchBox demo sections as the reference point and replace the current background token in that wrapper with the same background-dis token used elsewhere so both enabled and disabled Background examples stay consistent.src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.scss (1)
20-22: 🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick winMissing fallbacks for derived disabled-color variables still unresolved.
Without a status class,
--bit-tln-clr-dis-text/--bit-tln-clr-dis-bgare undefined, so--bit-tln-clr-dis,--bit-tln-clr-bg-dis,--bit-tln-clr-brd-dis, and--bit-tln-dot-ico-clr(line 52) resolve to nothing. This was flagged previously but the fallback was not added.🎯 Suggested fix
- --bit-tln-clr-dis: var(--bit-tln-clr-dis-text); - --bit-tln-clr-bg-dis: var(--bit-tln-clr-dis-bg); - --bit-tln-clr-brd-dis: var(--bit-tln-clr-dis-bg); + --bit-tln-clr-dis: var(--bit-tln-clr-dis-text, #{$clr-fg-dis}); + --bit-tln-clr-bg-dis: var(--bit-tln-clr-dis-bg, #{$clr-bg-dis}); + --bit-tln-clr-brd-dis: var(--bit-tln-clr-dis-bg, #{$clr-bg-dis});- --bit-tln-dot-ico-clr: var(--bit-tln-clr-dis-text); + --bit-tln-dot-ico-clr: var(--bit-tln-clr-dis);Also applies to: 51-52
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.scss` around lines 20 - 22, The disabled timeline color variables in BitTimeline.scss are still resolving to nothing when no status class is present because the derived values depend only on undefined base vars. Update the default variable definitions in the timeline root and the dot icon color block so BitTimeline uses fallback values for --bit-tln-clr-dis-text and --bit-tln-clr-dis-bg, ensuring --bit-tln-clr-dis, --bit-tln-clr-bg-dis, --bit-tln-clr-brd-dis, and --bit-tln-dot-ico-clr always resolve. Use the existing variable declarations in BitTimeline.scss as the fix point.
🧹 Nitpick comments (3)
src/BlazorUI/Bit.BlazorUI/Styles/functions.scss (1)
27-53: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winDoc comment overstates theming capability for focus-ring width/offset.
Doc says width/offset are driven by
--bit-shp-focus-ring-width/--bit-shp-focus-ring-offsetand are "globally themable," but the mixin only exposes--bit-focus-ring-offset(different name) and bakes the width in via SASS interpolation (#{$shp-focus-ring-width}) with no corresponding CSS custom property at all. Consumers attempting to override the ring width via CSS variables at runtime will have no effect.♻️ Suggested fix (align doc or implementation)
- * - Width is driven by --bit-shp-focus-ring-width and offset by --bit-shp-focus-ring-offset, - * both globally themable. + * - Offset is driven by --bit-focus-ring-offset (overridable per-instance/theme); width is a + * compile-time SASS token ($shp-focus-ring-width) and is not currently CSS-var themable.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Styles/functions.scss` around lines 27 - 53, The focus-ring mixin documentation overstates runtime theming support for ring width and offset, because `focus-ring` only sets `--bit-focus-ring-offset` and hardcodes the width via `#{$shp-focus-ring-width}`. Update `focus-ring` in `functions.scss` to either expose matching CSS custom properties for width/offset (aligned with `--bit-shp-focus-ring-width` / `--bit-shp-focus-ring-offset`) or revise the doc comment to describe the actual behavior; keep the implementation and comment consistent with the symbols `focus-ring`, `--bit-focus-ring-offset`, and `--bit-shd-focus-ring`.src/BlazorUI/Bit.BlazorUI/Styles/bit-css.scss (1)
942-944: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueExtra blank line before the new comment block.
Rest of the file uses a single blank line before section comments (e.g. before
//warning,//required); this block has two (lines 942-943).Suggested fix
.bit-css-shp-brd-style { border-style: $shp-border-style; } - //focus (a11y) — color tokens applied on :focus-visible.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Styles/bit-css.scss` around lines 942 - 944, Remove the extra blank line before the new focus accessibility comment block in bit-css.scss so it matches the surrounding section-comment style; keep the spacing consistent with the existing `//warning` and `//required` sections near the `//focus (a11y)` comment.src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Scripts/app.ts (1)
45-46: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value
newThemetyped as non-nullablestringbut guarded with?? ''.If the JS-side
onChangecallback can actually passnull/undefined, the type signature at Line 45 should reflect that (string | null); otherwise the??fallback is dead code masking the real contract.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Scripts/app.ts` around lines 45 - 46, The onChange callback in app.ts has a type/logic mismatch: newTheme is declared as a non-nullable string but is still guarded with a nullish fallback. Update the callback signature to match the actual JS contract if null or undefined can be passed, or remove the fallback if it cannot; use the onChange handler and the newTheme parameter as the key symbols to align the typing with the runtime behavior.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme.ts`:
- Around line 320-333: The shouldFollowSystem() logic in BitTheme currently only
checks the persisted theme when Theme._persist is enabled, so a cookie-only
persisted value of SYSTEM_THEME is ignored and the runtime OS-follow listener
may never attach. Update shouldFollowSystem() to consider the persisted
preference whenever any persistence source is active, including the
cookie-backed path used by getPersisted(), and treat a persisted SYSTEM_THEME as
an immediate true result while still letting non-system persisted values
override follow-system behavior.
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razor`:
- Around line 967-998: The sample in ThemingPage.razor has invalid C# in the
BitToggleButton Text expression because the ternary uses single-quoted
multi-character literals. Update the BitToggleButton markup so the outer
attribute quoting and the inner C# string literals are correct, using the
existing ToggleTheme and OnInitializedAsync sample as the reference point.
Ensure the expression remains a valid Razor/C# snippet that copies and compiles,
with string values for Light and Dark rather than char literals.
---
Duplicate comments:
In `@src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.scss`:
- Around line 20-22: The disabled timeline color variables in BitTimeline.scss
are still resolving to nothing when no status class is present because the
derived values depend only on undefined base vars. Update the default variable
definitions in the timeline root and the dot icon color block so BitTimeline
uses fallback values for --bit-tln-clr-dis-text and --bit-tln-clr-dis-bg,
ensuring --bit-tln-clr-dis, --bit-tln-clr-bg-dis, --bit-tln-clr-brd-dis, and
--bit-tln-dot-ico-clr always resolve. Use the existing variable declarations in
BitTimeline.scss as the fix point.
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor`:
- Around line 354-366: The disabled Background demo wrapper in
BitSearchBoxDemo.razor still uses the wrong theme token; update the wrapper
around the Background examples to match the enabled Background demo’s token
usage. Use the existing BitSearchBox demo sections as the reference point and
replace the current background token in that wrapper with the same
background-dis token used elsewhere so both enabled and disabled Background
examples stay consistent.
---
Nitpick comments:
In `@src/BlazorUI/Bit.BlazorUI/Styles/bit-css.scss`:
- Around line 942-944: Remove the extra blank line before the new focus
accessibility comment block in bit-css.scss so it matches the surrounding
section-comment style; keep the spacing consistent with the existing `//warning`
and `//required` sections near the `//focus (a11y)` comment.
In `@src/BlazorUI/Bit.BlazorUI/Styles/functions.scss`:
- Around line 27-53: The focus-ring mixin documentation overstates runtime
theming support for ring width and offset, because `focus-ring` only sets
`--bit-focus-ring-offset` and hardcodes the width via
`#{$shp-focus-ring-width}`. Update `focus-ring` in `functions.scss` to either
expose matching CSS custom properties for width/offset (aligned with
`--bit-shp-focus-ring-width` / `--bit-shp-focus-ring-offset`) or revise the doc
comment to describe the actual behavior; keep the implementation and comment
consistent with the symbols `focus-ring`, `--bit-focus-ring-offset`, and
`--bit-shd-focus-ring`.
In `@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Scripts/app.ts`:
- Around line 45-46: The onChange callback in app.ts has a type/logic mismatch:
newTheme is declared as a non-nullable string but is still guarded with a
nullish fallback. Update the callback signature to match the actual JS contract
if null or undefined can be passed, or remove the fallback if it cannot; use the
onChange handler and the newTheme parameter as the key symbols to align the
typing with the runtime behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 89ab4558-c664-4b7e-83c1-af4e56290a67
📒 Files selected for processing (139)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ButtonGroup/BitButtonGroup.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TagsInput/BitTagsInput.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Toggle/BitToggle.scsssrc/BlazorUI/Bit.BlazorUI/Components/Layouts/Grid/BitGrid.scsssrc/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Pagination/BitPagination.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scsssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.scsssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Link/BitLink.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/MediaQuery/BitMediaQuery.razor.cssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/MediaQuery/BitMediaQuery.tssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/MediaQuery/BitMediaQueryJsRuntimeExtensions.cssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/MediaQuery/BitScreenQuery.cssrc/BlazorUI/Bit.BlazorUI/Extensions/IBitBlazorUIServiceCollectionExtensions.cssrc/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/IJSRuntimeExtensions.cssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-dark.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-light.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/forced-colors.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/motion.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/semantic-tokens.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/shapes.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/bit-css.scsssrc/BlazorUI/Bit.BlazorUI/Styles/functions.scsssrc/BlazorUI/Bit.BlazorUI/Styles/media-queries.scsssrc/BlazorUI/Bit.BlazorUI/Styles/theme-variables.scsssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitAccentColorPresets.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeJsExtensions.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeLoader.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme.tssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitTheme.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBoxShadows.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBreakpoints.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeColors.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeLayout.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeMotion.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeShapes.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeTypography.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeAttributeNames.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeBreakpointDefaults.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeChangedEventArgs.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorContrast.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorDerivation.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeCookie.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeDensityPresets.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsExtensions.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsNotifierReceiver.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeManager.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeMapper.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeName.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeNotifications.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeProvider.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeSerialization.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeSsr.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeUtilities.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.tssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.scsssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Scripts/app.tssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorContrastTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorDerivationTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeManagerTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeMapperContractTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeMapperMergeDriftTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeModelCoverageTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeProviderHtmlAttributesTest.razorsrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeProviderTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeSsrTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/ThemeProbeConsumer.cs
💤 Files with no reviewable changes (1)
- src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts
Member
Author
|
@coderabbitai re-review |
|
✅ Action performedReview finished.
|
Member
Author
|
@coderabbitai full-review |
|
✅ Action performedFull review finished. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
closes #12320
Summary by CodeRabbit
:focus-visiblefocus/underline rings and improved disabled interaction + styling consistency across buttons/inputs/navs/menus and more.